<template>
    <div class="home-center">
      <!-- 顶部导航栏 -->
      <el-header class="header">
      <div class="headerContent">
        <div class="header-left">
          <img src="@/assets/logo.png" class="logo" alt="logo">
          <span class="title">在线学习平台</span>
        </div>
        <div class="header-center">
          <el-menu mode="horizontal" :default-active="activeIndex" class="nav-menu" background-color="transparent">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">在线课程</el-menu-item>
            <el-menu-item index="3">课程资源</el-menu-item>
            <el-menu-item index="4">直播课程</el-menu-item>
            <el-menu-item index="5">讲师列表</el-menu-item>
            <el-menu-item index="6">学习中心</el-menu-item>
          </el-menu>
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="user-info">
              <el-avatar :size="30" :src="userAvatar"></el-avatar>
              {{ userName }}
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      </el-header>
  
      <!-- 轮播图部分 -->
      <div class="banner-container">
        <el-carousel :interval="3000" height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <div class="banner-item" :style="{ backgroundImage: `url(${item.imageUrl})` }">
              <div class="banner-content">
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>
                <el-button type="primary" size="large" class="start-btn">立即开始</el-button>
              </div>
            </div> 
          </el-carousel-item>
        </el-carousel>
      </div>
  
      <!-- 分类卡片部分 -->
      <div class="category-cards">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(category, index) in categories" :key="index">
            <el-card class="category-card" shadow="hover">
              <div class="category-icon" :style="{ backgroundColor: category.color }">
                <i :class="category.icon"></i>
              </div>
              <div class="category-name">{{ category.name }}</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
  
      <!-- 主要内容区 -->
      <div class="main-content">
        <!-- 课程统计卡片 -->
        <div class="stats-cards">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="stats-card">
                <div class="card-content">
                  <div class="card-title">总课程数</div>
                  <div class="card-number">{{ totalCourses }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="stats-card">
                <div class="card-content">
                  <div class="card-title">已完成课程</div>
                  <div class="card-number">{{ completedCourses }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="stats-card">
                <div class="card-content">
                  <div class="card-title">学习进度</div>
                  <div class="card-number">{{ progress }}%</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
   
        <!-- 课程列表 -->
        <div class="course-list">
          <div class="section-title">我的课程</div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="course in courses" :key="course.id">
              <el-card class="course-card" :body-style="{ padding: '0px' }">
                <img :src="course.cover" class="course-image">
                <div class="course-info">
                  <h3>{{ course.name }}</h3>
                  <div class="course-progress">
                    <el-progress 
                      :percentage="course.progress" 
                      :show-text="false"
                    ></el-progress>
                    <span>{{ course.progress }}%</span>
                  </div>
                  <el-button type="primary" size="small">继续学习</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
  
        <!-- 新闻部分 -->
        <div class="news-section">
          <el-row :gutter="20">
            <!-- 学院新闻 -->
            <el-col :span="12">
              <el-card class="news-card">
                <div class="news-header">
                  <div class="news-title">
                    <i class="el-icon-news"></i>
                    <span>学院新闻</span>
                  </div>
                  <el-link type="primary">查看更多 ></el-link>
                </div>
                <div class="news-list">
                  <div v-for="(item, index) in newsItems" :key="index" class="news-item">
                    <span class="news-item-title">{{ item.title }}</span>
                    <span class="news-item-date">{{ item.date }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            
            <!-- 行业动态 -->
            <el-col :span="12">
              <el-card class="news-card">
                <div class="news-header">
                  <div class="news-title">
                    <i class="el-icon-data-analysis"></i>
                    <span>行业动态</span>
                  </div>
                  <el-link type="primary">查看更多 ></el-link>
                </div>
                <div class="news-list">
                  <div v-for="(item, index) in industryNews" :key="index" class="news-item">
                    <span class="news-item-title">{{ item.title }}</span>
                    <span class="news-item-date">{{ item.date }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HomeCenter',
    data() {
      return {
        userAvatar: '',
        userName: '张三',
        totalCourses: 12,
        completedCourses: 5,
        progress: 42,
        courses: [
        //   {
        //     id: 1,
        //     name: '计算机基础',
        //     cover: require('@/assets/course1.jpg'),
        //     progress: 60
        //   },
        //   {
        //     id: 2,
        //     name: '网络工程',
        //     cover: require('@/assets/course2.jpg'),
        //     progress: 30
        //   },
        //   {
        //     id: 3,
        //     name: '数据库原理',
        //     cover: require('@/assets/course3.jpg'),
        //     progress: 85
        //   },
        //   {
        //     id: 4,
        //     name: '软件工程',
        //     cover: require('@/assets/course4.jpg'),
        //     progress: 15
        //   }
        ],
        bannerList: [
          {
            id: 1,
            imageUrl: 'https://via.placeholder.com/1920x500/409EFF/FFFFFF',
            title: '在线教育平台',
            description: '为您提供优质的在线学习体验'
          },
          {
            id: 2,
            imageUrl: 'https://via.placeholder.com/1920x500/67C23A/FFFFFF',
            title: '名师在线授课',
            description: '汇聚各领域专家，提供专业指导'
          },
          {
            id: 3,
            imageUrl: 'https://via.placeholder.com/1920x500/E6A23C/FFFFFF',
            title: '丰富的课程资源',
            description: '涵盖多个学科，满足不同需求'
          }
        ],
        categories: [
          {
            name: '消防设施操作员',
            icon: 'el-icon-warning',
            color: '#FF6B6B'
          },
          {
            name: '公务员考试',
            icon: 'el-icon-edit',
            color: '#6C5CE7'
          },
          {
            name: '新闻记者培训',
            icon: 'el-icon-document',
            color: '#00D2D3'
          },
          {
            name: '档案整理培训',
            icon: 'el-icon-document',
            color: '#FDCB6E'
          }
        ],
        newsItems: [
          {
            title: '【拓城学院周年庆】重磅干货，优秀学员分享学习经验',
            date: '2023-09-07'
          },
          {
            title: '10月重庆消防监控方向计划招2426人，排号3000名以内',
            date: '2023-09-07'
          }
        ],
        industryNews: [
          {
            title: '行业新闻1',
            date: '2023-09-07'
          },
          {
            title: '行业新闻2',
            date: '2023-09-07'
          }
        ]
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .home-center {
    min-height: 100vh;
    background-color: #f5f7fa;
  }
  .headerContent{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0 20px;
  
    .header-left {
      display: flex;
      align-items: center;
  
      .logo {
        height: 40px;
        margin-right: 10px;
      }
  
      .title {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
      }
    }
  
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
  
      .el-avatar {
        margin-right: 8px;
      }
    }
  }
  
  .main-content {
    padding: 20px;
  
    .stats-cards {
      margin-bottom: 30px;
  
      .stats-card {
        .card-content {
          text-align: center;
          padding: 20px;
  
          .card-title {
            color: #909399;
            margin-bottom: 10px;
          }
  
          .card-number {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
          }
        }
      }
    }
  
    .course-list {
      .section-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #303133;
      }
  
      .course-card {
        margin-bottom: 20px;
        transition: all 0.3s;
  
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
  
        .course-image {
          width: 100%;
          height: 160px;
          object-fit: cover;
        }
  
        .course-info {
          padding: 15px;
  
          h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            color: #303133;
          }
  
          .course-progress {
            margin: 10px 0;
            display: flex;
            align-items: center;
  
            .el-progress {
              flex: 1;
              margin-right: 10px;
            }
  
            span {
              color: #909399;
              font-size: 12px;
            }
          }
        }
      }
    }
  
    .news-section {
      .news-card {
        .news-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
  
          .news-title {
            display: flex;
            align-items: center;
  
            i {
              margin-right: 8px;
            }
  
            span {
              font-size: 16px;
              font-weight: bold;
              color: #303133;
            }
          }
  
          .el-link {
            font-size: 14px;
            color: #409EFF;
            cursor: pointer;
  
            &:hover {
              text-decoration: underline;
            }
          }
        }
  
        .news-list {
          .news-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
  
            .news-item-title {
              font-size: 14px;
              color: #303133;
            }
  
            .news-item-date {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }
    }
  }
  
  .banner-container {
    width: 100%;
  
    .banner-item {
      width: 100%;
      height: 500px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
    
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
      }
    }
  
    .banner-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #fff;
      z-index: 10;
    
      h2 {
        font-size: 36px;
        margin-bottom: 20px;
        font-weight: bold;
      }
    
      p {
        font-size: 18px;
        margin-bottom: 30px;
      }
    }
  
    .start-btn {
      background-color: #409EFF;
      color: #fff;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
  
      &:hover {
        background-color: #66b1ff;
      }
    }
  }
  
  .category-cards {
    padding: 40px 120px;
    background-color: #fff;
    
    .category-card {
      text-align: center;
      padding: 30px 20px;
      transition: all 0.3s;
      cursor: pointer;
      border: none;
      background-color: #f8f9fa;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .category-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        i {
          font-size: 36px;
          color: #fff;
        }
      }

      .category-name {
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }
    }
  }
  </style>